<script setup lang="ts">
import { ElButton, ElDialog, ElImage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

import DialogSponsor from './components/DialogSponsor.vue';
import { ProTableScope, ProTableUltra } from '@/modules/package/table';
import useDialog from '@/hooks/useDialog';


const tableColumns = [
    { label: "序号", type: "index", width: 70 },
    { label: "Logo", slot: "logo", width: 120 },
    { label: "企业名称", prop: "title", minWidth: 200 },
    { label: "地址", prop: "address", minWidth: 200 },
    { label: "备注", prop: "remark", minWidth: 160 },
    { label: "操作", slot: "operate", minWidth: 100 },
];


const [visible, { source, open }] = useDialog()

</script>


<template>
    <div class="mb-3 text-right ">
        <ElButton type="primary" :icon="Plus" size="large" @click="open()">新增主办方</ElButton>
    </div>

    <ProTableUltra :columns="tableColumns" :fetch-url="''" footer-fixed>

        <ProTableScope>
            <template #logo="{ row }">
                <ElImage class="w-100" :preview-src-list="[row.logo]" />
            </template>

            <template #operate="{ row }">
                <ElButton link type="info">详情</ElButton>
                <ElButton link type="primary" @click="open(row)">编辑</ElButton>
            </template>

        </ProTableScope>

    </ProTableUltra>


    <ElDialog v-model="visible" destroy-on-close width="500" title="新增主办方">
        <DialogSponsor :source="source" />
    </ElDialog>

</template>